<template>
  <div class="card">
    <div class="card-body">
      <div class="panel-wrap">
        <span class="panel-icon" :style="{ color: statisticData.color }">
          <i class="fa" :class="statisticData.icon"></i>
        </span>
        <div class="panel-content">
          <div class="panel-num">{{ statisticData.num }}</div>
          <div class="text-muted">{{ statisticData.name }}</div>
        </div>
      </div>
      <hr />
      <div class="row" v-if="statisticData.child">
        <div
          class="text-truncate"
          v-for="(child, i) in statisticData.child"
          :key="i"
          :class="[
            `col-${getCol(statisticData.child)}`,
            child.onClick ? 'text-primary cursor-pointer' : 'text-muted',
          ]"
          @click="() => child.onClick && child.onClick()"
          style="font-size: 0.8rem"
        >
          <span>{{ child.name }}</span>
          <span>{{ child.num }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    statisticData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {}
  },
  methods: {
    getCol(child) {
      const len = child ? child.length : 1
      return len > 4 ? 3 : 12 / len
    },
  },
}
</script>
<style lang="scss" scoped>
.panel-wrap {
  display: flex;
  line-height: 1;
  align-items: center;
  margin-bottom: 1rem;

  .panel-icon {
    font-size: 36px;
    margin-right: 1rem;
    width: 40px;
    text-align: center;
  }

  .panel-content {
    font-size: 16px;
  }

  .panel-num {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 0.25rem;
  }
}
</style>
